<template>
    <el-dialog v-model="dialogFormVisible" :title="flag ? '新增' : '修改'">
        <el-form :model="form" label-width="auto" :rules="rules" ref="ruleFormRef" v-loading="isLoading"
            element-loading-text="数据加载中...">
            <el-form-item label="全类名" prop="className">
                <el-input v-model="form.className" placeholder="请输入全类名" />
            </el-form-item>
            <el-form-item label="cron" prop="cronExpression">
                <el-input v-model="form.cronExpression" placeholder="请输入cron表达式" @click="openCron" />
                <el-dialog v-model="showCron">
                    <Vue3CronPlusPicker @hide="showCron = false" @fill="fillValue" :expression="expression" />
                </el-dialog>
            </el-form-item>
            <el-form-item label="方法参数">
                <el-input v-model="form.params" placeholder="请输入方法参数" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="form.jobStatus" :active-value="'0'" :inactive-value="'1'" inline-prompt
                    active-text="开启" inactive-text="关闭" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回</el-button>
                <el-button type="primary" :disabled="isLoading" @click="addOrEdit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue"
import api from "@/api"
import { ElMessage } from 'element-plus'
import 'vue3-cron-plus-picker/style.css'
import { Vue3CronPlusPicker } from 'vue3-cron-plus-picker'

const rules = ref({
    className: [
        { required: true, message: '请输入全类名', trigger: 'blur' },
    ],
    cronExpression: [
        { required: true, message: '请输入cron表达式', trigger: 'blur' },
    ]
})
const isLoading = ref(false)
const flag = ref(false)
const ruleFormRef = ref()
const dialogFormVisible = ref(false)
const form = ref({ jobStatus: '0' })
const showCron = ref(false)
const expression = ref('* * * * * * *')

const init = async (jobId) => {
    dialogFormVisible.value = true
    isLoading.value = true
    if (jobId) {
        flag.value = false
        const res = await api.post('/job/scheduledJob/queryById', { id: jobId })
        if (res.data.code === 200) {
            form.value = res.data.data
        } else {
            ElMessage.error(res.data.msg)
        }
    } else {
        flag.value = true
        form.value = { jobStatus: '0' }
    }
    isLoading.value = false
}
const emit = defineEmits(['serversUpdated']);
const addOrEdit = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            isLoading.value = true
            let url
            if (flag.value) {
                url = '/job/scheduledJob/add'
            } else {
                url = '/job/scheduledJob/edit'
            }
            const res = await api.post(url, form.value)
            if (res.data.code === 200) {
                ElMessage.success(res.data.msg)
                emit('serversUpdated')
                dialogFormVisible.value = false
            } else {
                ElMessage.error(res.data.msg)
            }
            isLoading.value = false
        }
    })
}

const openCron = () => {
    showCron.value = true
    if (form.value.cronExpression) {
        expression.value = form.value.cronExpression
    }
}

const fillValue = (cronValue) => {
    form.value.cronExpression = cronValue
}

defineExpose({
    init
});

</script>